<template>
	<view class="login">
		<image class="logo" src="../../static/0.jpg"></image>
		<!-- 登录内容 -->
		<view class="login-body login" v-if="type === 'login'">
			<form @submit="onSubmit">
				<van-cell-group>
					<!-- 手机号 -->
					<van-field data-name="phone" :value="phone" @change="handleInput" required type="number" clearable label="手机号" placeholder="请输入手机号" />
	
					<!-- 密码 -->
					<van-field data-name="password" :value="password" @change="handleInput" required type="password" clearable label="密码" placeholder="请输入密码" />
				</van-cell-group>
				<view style="margin: 32rpx;">
					<view class="link-register" @click="switchType('register')">立即注册</view>
					<van-button round block color="#1baeae" form-type="submit">登录</van-button>
				</view>
			</form>
		</view>
		<!-- 注册内容 -->
		<view class="login-body register" v-else>
			<form @submit="onSubmit">
				<van-cell-group>
					<!-- 手机号 -->
					<van-field data-name="phone" :value="phone" @change="handleInput" required type="number" clearable label="手机号" placeholder="请输入手机号" />
					
					<!-- 密码 -->
					<van-field data-name="password" :value="password" @change="handleInput" required type="password" clearable label="密码" placeholder="请输入密码" />
				</van-cell-group>
				<view style="margin: 32rpx;">
					<view class="link-register" @click="switchType('login')">立即登录</view>
					<van-button round block color="#1baeae" form-type="submit">注册</van-button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup>
// 登录逻辑:  1. 请求授权用户信息   2. 授权成功后进行手机号登录   3. 登录成功后跳转我的页面
// 注册逻辑： 1. 验证手机号格式后进行注册  2. 注册成功后切换登录

// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import md5 from 'md5'
import { UserStore } from '../../store/user';
const userStore = UserStore()

const state = reactive({ type: 'login', phone: '', password: '' })

// 页面加载
onLoad(message => {})

// 页面显示
onShow(() => {})

// * 输入框双向绑定
const handleInput = (e) => {
	const value = e.detail
	const { name } = e.target.dataset
	state[name] = value
}

// * 切换操作类型
const switchType = (type) => {
	state.type = type
	state.phone = ''
	state.password = ''
}

// * 提交数据
const onSubmit = async () => {
	const { phone, password } = state
	// 1. 判断手机号与密码是否为空
	if (!phone) return uni.showToast({ title: '手机号不能为空' , icon: 'none'})
	if (!password) return uni.showToast({ title: '密码不能为空' , icon: 'none'})
	// 判断是否授权过用户信息
	if (!userStore.avatarUrl) {
		// 2. 要求用户授权用户信息【微信头像】
		const { userInfo } = await uni.getUserProfile({desc: '获取用户头像与昵称用于信息展示' })
		// 微信头像需要在我的页面中使用: 跨页面传输数据  1. 本地存储   2. 全局对象 globalData  3. vuex/pinia
		// 3. 存储授权信息
		userStore.saveUserProFile(userInfo.avatarUrl)
	}
	// 4. 发起请求进行登录
	uni.showLoading({ title: '登录中', mask: true })
	await userStore.login({ loginName: phone ,passwordMd5: md5(password) })
	// 5. 返回我的页面
	uni.switchTab({ url: '/pages/my/my' })
}

const { type, phone, password } = toRefs(state)
</script>

<style lang="scss">
.logo {
	width: 240rpx;
	height: 240rpx;
	display: block;
	margin: 160rpx auto 40rpx;
}
.login-body {
	padding: 0 40rpx;
}
.login,
.register {
	.link-register,
	.link-login {
		font-size: 28rpx;
		margin-bottom: 40rpx;
		color: #1989fa;
		display: inline-block;
	}
}
</style>
